<template>
  <div>
    <ul>
      <li v-for="item in 15">
        <div class="leftBox">
          <div class="title">北京</div>
          <div class="subTitle">北京东城</div>
        </div>
        <div class="rightBox">
          <div class="price"><span>￥</span><span>44</span><span>起</span></div>
          <div class="distance">距离未知</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
* {
  box-sizing: border-box;
}
li {
  width: 100%;
  height: 74px;
  padding: 15px;
  border-bottom: 1px solid rgb(229, 228, 228);
}
.leftBox {
  width: 275px;
  height: 45px;
  float: left;
}
.rightBox {
  width: 64px;
  height: 44px;
  float: left;
}
.title {
  font-size: 16px;
  margin-top: 5px;
}
.subTitle {
  font-size: 12px;
  color: grey;
  margin-top: 5px;
}
.price {
  width: 65px;

  height: 22px;
  margin-top: 3px;
}
.price span {
  color: orange;
}
.distance {
  width: 65px;
  height: 22px;
  font-size: 12px;
  color: grey;
}
</style>
